<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path=request.getContextPath();%>
<html>
	<head>
		<meta charset="UTF-8">
<meta name="author" content="order by dede58.com"/>
		<title>订单列表</title>
		<jsp:include page="common.jsp"/>
		<style type="text/css">
			input{

			}
		</style>
	</head>
	<body>
		<div class="main_box" >
			<h2><span></span>空闲房间列表</h2>
			<form action="#" method="post" id="order_shform">
				<div class="search_box clearfix">
					<label class="f_left">搜索房间：</label>
					<input type="text" class="f_left" name="order_code" placeholder="请输入房间号/楼层/房间类型" style="height: 35px;margin-right:15px;width: 300px"/>
					<label class="f_left">开始日期：</label>
					<div class="date_box">
						<input type="text" name="start" id="start_date" readonly style="height: 35px;margin-right:15px;"/>
						<i class="fa fa-calendar"></i>
					</div>
					<label class="f_left">结束日期：</label>
					<div class="date_box">
						<input type="text" name="end" id="end_date" readonly style="height: 35px;margin-right:15px;"/>
						<i class="fa fa-calendar"></i>
					</div>
					<input type="button" value="搜索" class="btn blue_btn search"/>
				</div>
			</form>
			<div class="cont_box">
				<table border="0" cellspacing="0" cellpadding="0" class="table" id="table_box">
					<thead>
					<tr>
						<th width="5px">序号</th>
						<th width="100px">房间号</th>
						<th width="100px">房间类型</th>
						<th width="100px">房间价格</th>
						<th width="100px">房间楼层</th>
						<th width="100px">房间状态</th>
						<th width="100px">入住客人</th>
						<th width="200px">操作</th>
					</tr>
					</thead>
					<tbody>
<%--静态展示--%>
					<tr id="b_888"><!--此处id为进行查看该会员相关信息时，当前数据的唯一标识-->
						<td class="id">1</td>
						<td class="name">888</td>
						<td class="amount">单人间</td>
						<td class="price" >1</td>
						<td class="floorId" >8楼</td>
						<td class="state" >空闲</td>
						<td class="customerId"></td>
						<td >
							<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="add_customer(${one.id})"   class="table_btn blue_btn">添加客户并办理入住</button>
						</td>
					</tr>
<%--动态输入house列表信息--%>
					<c:forEach var="one" items="${houseList}" varStatus="n">
						<tr id="b_${one.id}"><!--此处id为进行查看该会员相关信息时，当前数据的唯一标识-->
							<td class="id">${one.id}</td>
							<td class="name">${one.name}</td>
							<td class="amount">${one.amount}</td>
							<td class="price">${one.price}</td>
							<td class="floorId">${one.floorId}</td>
							<td class="state">${one.state}</td>
							<td class="customerId">${one.customerId}</td>
							<td>
								<button type="button" style="margin: 0px 5px 0px 0px" href="javascript:void(0);" onclick="add_customer(${one.id})"   class="table_btn blue_btn">添加客户并办理入住</button>
							</td>
						</tr>
					</c:forEach>
					</tbody>
				</table>
			</div>
			<div>
				<div class="modal fade" id="editorModal" >
					<div class="modal-dialog">
						<div class="modal-content" style="width: 800px">

							<div class="modal-header">
								<h5 class="modal-title">添加客户并办理入住</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>

							<div class="modal-body">
								<form action="#" method="post" id="editor_form">
									<ul class="addpro_box adduser_box">
										<li>
											<label>序号：</label>
											<input type="text" placeholder="${id}" name="id"  id="id" data-msg-required="序号不能修改"value="${id}"  disabled="disabled" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>房间号：</label>
											<input type="text" placeholder="${name}" name="name"  id="name"  value="${name}" disabled="disabled"  data-msg-required="房间号不能为空" style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>房间类型：</label>
											<input type="text" placeholder="${amount}" name="amount" id="amount" value="${amount}" disabled="disabled" data-msg-required="房间类型不能为空"style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>价格：</label>
											<input type="text" placeholder="${price}" name="price" id="price" value="${price}" disabled="disabled" data-msg-required="价格不能为空"style="height: 35px;margin-right:15px;"/>
										</li>
										<li>
											<label>所在楼层:</label>
											<select  name="floorId" id="floorId" disabled="disabled" style="float: left;width: 80px">
												<option value="1楼" <c:if test="${floorId=='1楼'}"></c:if>>1楼</option>
												<option value="2楼" <c:if test="${floorId=='2楼'}"></c:if>>2楼</option>
												<option value="3楼" <c:if test="${floorId=='3楼'}"></c:if>>3楼</option>
												<option value="4楼" <c:if test="${floorId=='4楼'}"></c:if>>4楼</option>
												<option value="5楼" <c:if test="${floorId=='5楼'}"></c:if>>5楼</option>
												<option value="6楼" <c:if test="${floorId=='6楼'}"></c:if>>6楼</option>
												<option value="7楼" <c:if test="${floorId=='7楼'}"></c:if>>7楼</option>
												<option value="8楼" <c:if test="${floorId=='8楼'}"></c:if>>8楼</option>
											</select>
											<label>房间状态:</label>
											<select name="state" id="state"  disabled="disabled" style="float: left;width: 80px">
												<option value="在住" <c:if test="${state=='在住'}"></c:if>>在住</option>
												<option value="已订" <c:if test="${state=='已订'}"></c:if>>已订</option>
												<option value="空闲" <c:if test="${state=='空闲'}"></c:if>>空闲</option>
												<option value="维修" <c:if test="${state=='维修'}"></c:if>>维修</option>
											</select>
										</li>
										<li style="display: flex" >
											<label>入住日期：</label>
											<input type="date" name="start" id="startTime" style="height: 30px;width:150px">
											<label >预期退房：</label>
											<input type="date" name="end" id="endTimeEstimate" class="date" style="height: 30px;width:150px;" >
										</li>
										<li style="display: flex;">
											<label>已缴费：</label>
											<input type="text" name="feeTotal" id="feeTotal" style="height: 35px;width:50px;margin-right:15px;">
											<label>缴费流水号：</label>
											<input type="text" name="feeInfo" id="feeInfo" style="height: 35px;width:50px;margin-right:15px;">
										</li>
										<li>
											<label>操作员号：</label>
											<input type="text"  placeholder="工号" name="userId" id="userId" style="height: 35px;width:50px;margin-right:15px;"/>
										</li>
										<label>订房人：</label>
										<li style="display: flex;">
											<label>姓名：</label>
											<input type="text"  name="customerName2"  style="height: 35px;width:15px;margin-right:5px;"/>
											<label>身份证号：</label>
											<input type="text"  placeholder="18位数字" name="customerCard"  style="height: 35px;margin-right:5px;"/>
										</li>
											<label>入住人：</label>
										<li style="display: flex;" >
											<label>姓名：</label>
											<input type="text"  name="customerName"  style="height: 35px;width:15px;margin-right:5px;"/>
											<label>身份证号：</label>
											<input type="text"  placeholder="18位数字" name="customerCard"  style="height: 35px;margin-right:5px;"/>
										</li>
										<div class="ruzhuren">
										</div>

									</ul>
								</form>
							</div>

							<div class="modal-footer">
								<button type="button"  class="btn btn-primary"  onclick="add_family()" >添加入住人</button>
								<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="remove_child()">取消</button>
								<button type="submit" class="btn btn-primary"  onclick="checkin(${id})">确认</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--javascript include-->
		<script src="../../js/jquery-2.2.1.min.js"></script>
		<script src="../../js/jquery.dataTables.min.js"></script>
		<script src="../../js/bootstrap-datepicker.js"></script>
		<script src="../../js/jquery.validate.min.js"></script>
		<script src="../../js/other.js"></script>
		<script type="text/javascript">
			function add_family() {

				let ruzhuren = document.querySelector(".ruzhuren")
				ruzhuren.style.display = "block"
				ruzhuren.innerHTML += `
				<li style="display: flex;margin-left: 110px" >
					<label>姓名：</label>
					<input type="text"  name="customerName"  style="height: 35px;width:15px;margin-right:5px;"/>
					<label>身份证号：</label>
					<input type="text"  placeholder="18位数字" name="customerCard"  style="height: 35px;margin-right:5px;"/>
				</li>
				`
			}
			function remove_child() {
				let ruzhuren = document.querySelector(".ruzhuren")
				ruzhuren.innerHTML="";
			}
			function add_customer(id) {
				//打开添加顾客模态框
				//发送ajax请求 查询到顾客信息 并返回顾客姓名name和id
				//将顾客信息写入table相应的行
				$("#editorModal").modal("show");
				$("#id").val($("#b_"+id+" .id").text());
				$("#name").val($("#b_"+id+" .name").text());
				$("#amount").val($("#b_"+id+" .amount").text());
				$("#price").val($("#b_"+id+" .price").text());
				$("#floorId").val($("#b_"+id+" .floorId").text());
				$("#state").val($("#b_"+id+" .state").text());
				$("#customerId").val($("#b_"+id+" .customerId").text()) ;
			}
			function checkin(id) {
				//获取当前行的后house_id 和customer_id 和入住时间start_date和预计退房时间end_date
				//发送ajax请求 0支付  支付完成 进行下面步骤 1变更房间状态  2生成订单
				//返回成功信息 并刷新当前页面
				/*
	private Integer id;//不用传
    private Integer houseId;//传入id
    private Integer customerId;//不传入 controller中设置 后台查询
    private String customerInfo;//传入  根据card查询 顾客id
    private Date startTime;//传入
    private Date endTimeEstimate;//传入
    private Date endTimeActual;//暂时不写入
    private String orderCustomerId;//不传入 controller中设置  根据card查询 顾客id 默认第一个card的id值
    private Double feeTotal;//传入
    private String feeInfo;//传入
    private Integer userId;//传入
    private String state;//不传入 controller中设置为 在住中
    private Double price;//传入price
				 */
				var  startDate = Date.parse($("#startTime").val().trim());
				var  endDate = Date.parse($("#endTimeEstimate").val().trim());
				if (startDate>endDate){
					return 0;
				}
				if (startDate==endDate){
					return 1;
				}
				var days=(endDate - startDate)/(1*24*60*60*1000);
				var feeTotal=days*$("#price").val();
				var customerCards=document.getElementsByName("customerCard");
				var customerInfo="";
				for ( var int = 0; int < customerCards.length; int++) {
					console.info("方法一："+customerCards[int].id+":"+customerCards[int].value);
					customerInfo+=customerCards[int].value;
				}
				// alert(cards);
				// alert($("#id").val());
				var startTime=$("#startTime").val().trim();
				var endTimeEstimate=$("#endTimeEstimate").val().trim();
				// alert(typeof $("#startTime").val().trim())
				// alert($("#startTime").val().trim())
				$.ajax({
					url:"<%=path%>/enter/checkin",
					method:"post",
					dataType:"JSON",
					data: {
						houseId:$("#id").val(),
						customerInfo:customerInfo,
						startTime:startTime,
						endTimeEstimate:endTimeEstimate,
						feeTotal:feeTotal,
						feeInfo:$("#feeInfo").val(),
						userId:$("#userId").val(),
						price:$("#price").val(),
					},
					success:function (data) {
						if(data>0)alert("入住办理成功")
						else alert("入住办理成功")
					},
					error:function (e) {
						alert("通讯失败")
					}
				})
			}
		</script>
		<script>
			$(function(){
				$("body").other({tableId:"#table_box",tableWrap:[0,1,2,3,4,7,8],tableAas:[6,"desc"]});
				$("body").tipWindow({method:"delete",Class:".del_btn",even:"click",deleteTxt:"确认要退单吗？",Twidth:"400",Theight:"180",delUrl:"#"});//delUrl 退单请求地址
				$("body").tipWindow({method:"edit",type:"form",Class:".detail_btn",even:"click",tipTit:"订单详情",Twidth:"800",Theight:"600",editUrl:"order_Detail.html"});//editUrl 编辑请求地址
				$("body").tipWindow({method:"edit",type:"form",Class:".edit_btn",even:"click",tipTit:"编辑订单",Twidth:"800",Theight:"600",editUrl:"order_edit.html"});//editUrl 编辑请求地址
				//订单搜索
				$(".search").click(function(){
					var data = {"startDate":$("#order_shform").find("input[name='start']").val(),"endDate":$("#order_shform").find("input[name='end']").val(),"orderId":$("#order_shform").find("input[name='order_code']").val()};
					$.ajax({
						type:"post",
						url:"search_Order.html",
						data:data,
						success:function(data){
							$(".table").remove();
							$(".cont_box").append(data);
							$("body").other({tableId:"#table_box",tableWrap:[0,1,2,3,4,7,8],tableAas:[6,"desc"]});
							$("body").tipWindow({method:"delete",Class:".del_btn",even:"click",deleteTxt:"确认要退单吗？",Twidth:"400",Theight:"180",delUrl:"#"});//delUrl 退单请求地址
							$("body").tipWindow({method:"edit",type:"form",Class:".edit_btn",even:"click",tipTit:"订单详情",Twidth:"800",Theight:"600",editUrl:"order_Detail.html"});//editUrl 编辑请求地址
						},
						error:function(data){
							alert(data);
						}
					});
				});
			});
		</script>
	</body>
</html>
